import QtQuick 2.6
import Sailfish.Silica 1.0
import "../config"

Rectangle {
    id: dock
    height: rowNavigation.height
    color: AppColor.themeMode.windowBackColor

    property real currentIndex: 0
    property UITabView tabView: null
    property var iconArray: []
    property var nameArray: []

    Rectangle {
        id: line
        color: AppColor.themeMode.lineColor
        width: parent.width
        anchors.top: parent.top
        height: 1
    }

    Row {
        id: rowNavigation
        width: parent.width
        anchors.top: line.bottom
        spacing: 0 // 移除默认间距
        bottomPadding: 20
        topPadding: 20

        Repeater {
            model: nameArray.length

            //使用Item，因为Column无法绑定MouseArea
            delegate: Item {
                width: rowNavigation.width / nameArray.length
                height: contentColumn.height + 40 // 包含上下padding

                Column {
                    id: contentColumn
                    width: parent.width
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8 // 调整图标和文字间距

                    Icon {
                        source: iconArray[index]
                        width: 80
                        height: 80
                        color: index === currentIndex ? AppColor.themeMode.themeColor : AppColor.themeMode.secondaryColor
                        anchors.horizontalCenter: parent.horizontalCenter
                    }

                    Label {
                        text: qsTr(nameArray[index])
                        color: index === currentIndex ? AppColor.themeMode.themeColor : AppColor.themeMode.secondaryColor
                        font.pixelSize: 40
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: navigationClick(index)
                }
            }
        }
    }

    function navigationClick(index) {
        if (currentIndex !== index) {
            currentIndex = index
            if (tabView) tabView.currentIndex = index
        }
    }
}
